<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<style>
 *{
  margin:0;
  padding:0;
  list-style-type: none;
 }
 ul{
   list-style-type: none;
 }
 li{
   list-style: none;
   text-align: center;
   font-size: 13;
 }
 .collapsed{
   height:25px;
 }
 .menu{
   background-color: bisque;
   width:150px;
   font-size:14px;
   padding-bottom:10px;
color:black;
margin:0 auto;
 }
 .menu div{
   overflow: hidden;
 }
 div span{
   display:block;
   height:15px;
   overflow: hidden;
   padding:5px 25px;
   line-height: 15px;
   color:black;
 }
 a{
   line-height: 15px;
  text-decoration:none;
 }
</style>
<script>
  window.onload=function(){
 var menu=document.querySelectorAll(".mspan");
 var open=menu[0].parentNode;
 for(var i=0;i<menu.length;i++){
   menu[i].onclick=function(){
     var parent=this.parentNode;
     /*var begin=parent.offsetHeight;
     toggle(parent,"collapsed");
     var end=parent.offsetHeight;
     parent.style.height=begin+'px';
     move(parent,"height",end,10,function(){
parent.style.height="";
     })*/
     toggleN(parent);
     if(open!=parent && !hasclass(open,"collapsed")){
       //addclass(open,"collapsed");
       toggleN(open);
     }
     open=parent;
   }
 };
 function toggleN(obj){
  var begin=obj.offsetHeight;
     toggle(obj,"collapsed");
     var end=obj.offsetHeight;
     obj.style.height=begin+'px';
     move(obj,"height",end,10,function(){
obj.style.height="";
     })
 };
 function hasclass(obj,cn){
    var reg=new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
  };
  function remove(obj,cn){
var reg=new RegExp("\\b"+cn+"\\b");
obj.className=obj.className.replace(reg," ");
  };
  function toggle(obj,cn){
    if(!hasclass(obj,cn)){
      addclass(obj,cn);
    }
    else{
      remove(obj,cn);
    }
  };
  function addclass(obj,cn){
    if(!hasclass(obj,cn))
obj.className+=" "+cn;
  };
  function move(obj,str,target,speed,callback){
    clearInterval(obj.t);
    obj.t=setInterval(function(){
    var old=parseInt(obj.style[str]);
    var newvalue=old+speed;
    if((speed<0 && newvalue<target) || (speed>0 && newvalue>target)){
     newvalue=target;
    }
    obj.style[str]=newvalue+'px';
    if(newvalue==target){
      clearInterval(obj.t);
      callback();
    }
  },30)
  };
  }
 </script>
<body>
<div id="box" class="menu">
  <div>
    <span class="mspan">在线工具</span>
    <ul>
    <li><a href="#">图像优化</a></li>
    <li><a href="#">图标生成器</a><li>
    <li><a href="#">邮件</a></li>
    </li>
  </div>
  <div class="collapsed">
<span class="mspan">支持我们</span>
<ul>
  <li><a href="#">推荐我们</a></li>
  <li><a href="#">链接我们</a></li>
  <li><a href="#">网络资源</a></li>
  </ul>
  </div>
  <div class="collapsed">
    <span class="mspan">合作伙伴</span>
    <ul>
    <li><a href="#">推荐我们</a></li>
    <li><a href="#">链接我们</a></li>
    <li><a href="#">网络资源</a></li>
    </ul>
      </div> 
      <div class="collapsed">
        <span class="mspan">测试电信</span>
        <ul>
          <li><a href="#">推荐我们</a></li>
          <li><a href="#">链接我们</a></li>
          <li><a href="#">网络资源</a></li>
          </ul>
          </div>
</div>
</body>
</html>                                                                                                                                 